<template>
  <div>
    <div class="selectbook">
      <div class="selectbox">
        <div class="selecttype">推荐图书</div>
        <div class="bottom"></div>
      </div>
      <div class="selectbox">
        <div class="selecttype">全部书籍</div>
      </div>
    </div>
    <div class="selectType">
      <div class="typeleft">
        推荐学段:
        <select name="" id="">
          <option value="">1-2年级</option>
          <option value="">3-4年级</option>
          <option value="">5-6年级</option>
        </select>
      </div>
      <div class="typeright">
        <ul>
          <li v-for="(item2, index) in booktype" :key="index">{{ item2 }}</li>
          <li class="all">全部</li>
        </ul>
      </div>
    </div>
    <div class="bookpage">
      <div id="pages2">
        <ul>
          <li v-for="(user, index) in newUser" :key="index + 1">
            <a href="#" class="bookbox3">
              <img :src="user.img" alt="" />
              <div class="bookname">{{ user.name }}</div>
            </a>
          </li>
        </ul>

        <!--  这里绑定总页数    父组件传过来参数 复用件接收后判断如果为true执行css样式  -->
        <pagination :pages="showUsers" @click-pag="fn" :page="uPage">
        </pagination>
      </div>
    </div>
  </div>
</template>

<script>
import pagination from "../components/pagination";
export default {
  data() {
    return {
      booktype: [
        "诗歌",
        "自然",
        "绘本",
        "童话",
        "神话",
        "文史",
        "教学",
        "小说",
        "名著",
        "名人传记",
      ],
      users: [
        {
          id: 1,
          name: "了不起的狐狸爸爸",

          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 3444,
          like: 926,
        },
        {
          id: 2,
          name: "小猪唏哩呼噜",
          img: require("../assets/img/book/xzxlhl.png"),
          discuss: 3406,
          like: 458,
        },
        {
          id: 3,
          name: "猜猜我有多爱你",
          img: require("../assets/img/book/ccwydan.png"),
          discuss: 1836,
          like: 470,
        },
        {
          id: 4,
          name: "格林童话选",
          img: require("../assets/img/book/glthx.png"),
          discuss: 1800,
          like: 538,
        },
        {
          id: 5,
          name: "青蛙和蟾蜍",
          img: require("../assets/img/book/qwhcc.png"),
          discuss: 1771,
          like: 408,
        },
        {
          id: 6,
          name: "我有友情要出租",
          img: require("../assets/img/book/wyyqycz.png"),
          discuss: 1663,
          like: 395,
        },
        {
          id: 7,
          name: "一年级大个儿二年级小个儿",
          img: require("../assets/img/book/ynj.png"),
          discuss: 1624,
          like: 350,
        },
        {
          id: 8,
          name: "神笔马良",
          img: require("../assets/img/book/sbml.png"),
          discuss: 1604,
          like: 622,
        },
        {
          id: 9,
          name: "夏洛的网",
          img: require("../assets/img/book/xldw.png"),
          discuss: 1467,
          like: 244,
        },
        {
          id: 10,
          name: "了不起的狐狸爸爸",
          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 1423,
          like: 52,
        },
        {
          id: 11,
          name: "了不起的狐狸爸爸",
          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 1423,
          like: 52,
        },
        {
          id: 12,
          name: "了不起的狐狸爸爸",
          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 1423,
          like: 52,
        },
        {
          id: 13,
          name: "了不起的狐狸爸爸",
          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 1423,
          like: 52,
        },
        {
          id: 14,
          name: "了不起的狐狸爸爸",
          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 1423,
          like: 52,
        },
        {
          id: 15,
          name: "了不起的狐狸爸爸",
          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 1423,
          like: 52,
        },
        {
          id: 16,
          name: "了不起的狐狸爸爸",
          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 1423,
          like: 52,
        },
        {
          id: 17,
          name: "了不起的狐狸爸爸",
          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 1423,
          like: 52,
        },
        {
          id: 18,
          name: "了不起的狐狸爸爸",
          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 1423,
          like: 52,
        },
        {
          id: 19,
          name: "了不起的狐狸爸爸",
          img: require("../assets/img/book/lbqdhlbb.png"),
          discuss: 1423,
          like: 52,
        },
      ],
      uPage: 1, //当前页
      perPage: 8, //每页显示多少条
    };
  },
  components: {
    pagination,
  },
  computed: {
    // 获取总页数
    showUsers: {
      get() {
        return Math.ceil(this.users.length / this.perPage);
      },
    },
    newUser: {
      //渲染到页面
      get() {
        // 分割数据
        // this.$options.methods.searchMethod();
        return JSON.parse(JSON.stringify(this.users)).splice(
          (this.uPage - 1) * this.perPage,
          this.perPage
        );
      },
    },
  },

  methods: {
    fn(n) {
      // console.log(n)
      this.uPage = n; //接收到 子组件传过来的数据 修改data的显示
    },
  },
};
</script>

<style scoped>
@import "../assets/css/recommend.css";
</style>